<template>
    <!-- 个人中心侧边菜单栏 -->
    <el-row class="">
        <el-col :span="12">
            <div class="aleft" style="width: 250px;text-align: center;background-color: white;box-shadow: 0 1px 5px rgb(0 0 0 / 10%)">
                <h3>
                    <a href="#"><img :src="imageUrl" /></a>
                    <!-- <p class="" @click="logout"><span>[退出登录]</span></p> -->
                </h3>
                <div>
                    <h4>个人中心</h4>
                    <ul>
                        <li><router-link to="/front/my/person">我的信息</router-link> </li>
                        <li><a href="/front/my/address">地址管理</a></li>
                        <li><a href="/front/my/mypet">我的宠物</a></li>
                    </ul>
                    <h4>我的交易</h4>
                    <ul>
                        <li><a href="/front/shopcart">购物车</a></li>
                        <li><router-link to="/front/my/order">费用结算</router-link> </li>
                    </ul>
                    <h4>就诊详情</h4>
                    <ul>
                        <li><a href="/front/my/reserve">立即预约</a></li>
                        <li><a href="/front/my/myreserve">预约记录</a></li>
                        <li><a href="/front/my/mytreatment">问诊记录</a></li>
                        <li><a href="/front/my/myauxiliarycheck">检查记录</a></li>
                        <li><a href="/front/my/mydrug">药品记录</a></li>
                    </ul>

                </div>
            </div>
        </el-col>
    </el-row>
</template>

<script>
export default {
    name: "FrontAside",
    data() {
        return {
            customer: localStorage.getItem("customer") ? JSON.parse(localStorage.getItem("customer")) : {},
            imageUrl: ''
        }
    },
    mounted() {
        this.$bus.$on("getCustomerImageAndName", this.clog)
    },
    beforeDestroy() {
        this.$bus.$on("getCustomerImageAndName")
    },
    created() {
        this.imageUrl = "http://localhost:8081/common/download?name=" + this.customer.image
    },
    methods: {
        logout() {
            //注销按钮函数
            localStorage.clear("customer");

            this.$router.push("/front/home")
            this.$router.go(0)
        },
        clog(customer) {
            this.imageUrl = "http://localhost:8081/common/download?name=" + customer.image
        }
    }

}
</script>

<style lang="less">
.aleft {
    a {
        text-decoration: none;
        color: grey;

    }

    h4 {
        cursor: pointer;
        color: #444;
        font-size: 16px;
        font-weight: 550;
    }

    ul li {
        text-align: center;
        list-style: none;
        padding: 5px 0px;
    }

    h3 img {
        border-radius: 50%;
        overflow: hidden;
        width: 100px;
        height: 100px;
    }
    ul{
        padding-left: 0;
    }
    p{
        span{
            font-size: 15px;
        }
    }


}








body {
    background-color: #f5f5f5;
}
</style>